<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!--! 响应式布局  必写 -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>栅格布局</title>

  <!-- ! bootstrap4基本所需css/js引入 -->
  <link rel="stylesheet" href="./css/bootstrap.css">
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <script src="./js/jquery-3.5.1.min.js"></script>
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <script src="./js/bootstrap.js"></script>


  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css" rel="stylesheet"> -->
  <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> -->
  <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
  <!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.js"></script> -->
</head>

<body>
  <!-- class="container" 这个是bootstrap的框架，内容都要放在这里面，container表示流式布局，会根据width进行响应式变动 -->
  <!-- class="container-fluid" 表示固定布局，宽度固定，不会响应式变动 -->

  <div class="container" style="background-color: aquamarine;">
    <div class="row">
      <!-- 
                    超小屏幕<576px	        小屏幕≥576px	             中等屏幕≥768px	               大屏幕≥992px	        超大屏幕≥1200px
栅格系统行为	       总是排列在一行	                  开始是一个个单独一行的，当大于这些阈值时将排列在一行
container最大宽度	   None（自动）	            540px	                       720px	                        960px                1140px
  类前缀              .col-	                .col-sm-	                  .col-md-                  	  .col-lg-               .col-xl-
       -->

      <!-- ! 设置col-xs那么从最小宽度到最大宽度，都会排列在一行
           ! 如果设置col-sm，那么，从sm宽度开始到最大宽度，才会排列在一行，而小于sm的col超小屏幕则会每个col单独一行(也就是默认占12格)
           ! 同理，设置col-md，那么从md宽度开始到最大宽度，才会排列在一行，而小于md的sm/col超小屏幕则会每个col单独一行
           ? 这是因为从设置的开始，往上走，没有设置则以当前设置为准，而比当前小的没有设置，则每个col单独一行
           !（可以通过 class="col-4 col-md-8" 设置不同屏幕大小状况下的栅格布局模式 ）
           ? 所以，直接设置col-xs貌似最方便 -->

      <!-- 栅格布局是一行分为12列，所以col-number之和要为12  前两个写了数字，最后一个不写，则会自动计算12的差值，使得总和为12-->

      <!-- ! 只写col就识别不了，必须写成col-xs-4（相当于col最小了） 这样子的 是bootstrap3   
           ! 我们用bootstrap4就不会有这些问题
           ! 而且，bootstrap4引入了flex布局，更好的布局使用，别用3了-->


      <!-- 超小屏幕(手机) -->
      <div class="col" style="border: 1px solid red;">1</div>
      <div class="col" style="border: 1px solid red;">2</div>
      <div class="col" style="border: 1px solid red;">3</div>

      <!-- 小屏幕 -->
      <!-- <div class="col-sm-4">1</div>
      <div class="col-sm-4">2</div>
      <div class="col-sm-4">3</div> -->

      <!-- 中等屏幕 -->
      <!-- <div class="col-md-8">1</div>
      <div class="col-md-2">2</div>
      <div class="col-md-2">3</div> -->

      <!--超小屏幕(手机) / 中等屏幕 切换栅格布局 -->
      <!-- ! 在col超小屏幕到小屏幕时，是col-4的布局  当达到md中等屏幕及以上时，则会变成 col-md-8布局模式 -->
      <!-- <div class="col-xs-4 col-md-8" style="border: 1px solid black;">1</div>
      <div class="col-4 col-md-2" style="border: 1px solid black;">2</div>
      <div class="col-4 col-md-2" style="border: 1px solid black;">3</div> -->

    </div>
  </div>

  <!-- 
      >=768的设备
      @media (min-width: 768px){  }
      最小宽度不能低于768px的意思

      <=1199的设备
      @media (max-width: 1199px){  }
      最大宽度不能超过1199px的意思 
  -->
</body>

</html>